<template>
    <div id="index">
        <cube-slide ref="slide" :data="items" :show-dots='true'  @change="changePage">
            <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
                <a :href="item.url">
                 <img class="banner" :src="item.image">
                </a>
            </cube-slide-item>
           <div slot="dots"></div>
        </cube-slide>

        <cube-slide ref="slidelists" :data="lists">
            <cube-slide-item v-for="(list,index) in lists" :key="index">
                <ul class="listul">
                    <li class="listli" v-for="(item,index1) in list" :key="index1">
                        <a :href="item.url">
                           <img :src="item.image" alt="">
                           <p>{{item.label}}</p>
                       </a>
                    </li>
                </ul>
            </cube-slide-item>
        </cube-slide>
    </div>
</template>




<script>
export default {
    data() {
        return {
            items: [],
            lists:[],
            dots:true
        }
    },
    methods: {
        changePage(current) {
        // console.log('当前轮播图序号为:' + current)
        },
        clickHandler(item, index) {
        // console.log(item, index)
        }
    },
    async created() {
        try {
            const items=await this.$http.get('/api/banner')
            this.items=items.data

            const lists=await this.$http.get('/api/rollinglist')
            this.lists=lists.data
        } catch (error) {
            console.log(error)
        }
    },
}
</script>


<style lang="stylus" scoped>
  #index
    a 
      .banner
        display block
        width 100%
        height 175px
    .listul
            display flex
            flex-wrap   wrap
        .listli
            width 20%
            justify-content center
            img
                width 35px
                height  35px
                border-radius  50%
                padding 5px 0
            p
                font-size  14px
                padding-bottom  10px
  
</style>